<!--
获取和修改元素属性：
    innerText
        Element.innerText 属性表示一个节点及其后代的“渲染”文本内容
    innerHTML
        E1ement.innerHTML 属性设置或获取HTML语法表示的元素的后代

    Element 代表一个元素
-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <span>这是一个 span 标签</span>

    <img src="./LOL.png" alt="图片加载失败" width="100px" height="100px" title="这是一个提示图片">
</body>

<script>
    // 获取元素内容
    let span=document.querySelector('span');
    console.log(span.innerHTML);
    console.log(span.innerText);
    // 修改, 两者都可以完成修改文本内容
    // span.innerHTML="我在修改元素内容";
    span.innerText="我在修改元素内容";
    console.log(span.innerText);
    // 修改页面结构
    span.innerHTML="<h3>这是h3标签</h3>";

    let img=document.querySelector('img');
    console.dir(img);// 打印 img 所具有的所有属性
    img.title="这是一个修改完毕的 title"; // 修改属性
    img.onclick=function(){
        alert("你已经点击了这个图片");
    }

</script>

</html>